<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .container{
        width: 550px;
        height: 250px;
        display: grid;
        grid-template-columns: repeat(5,minmax(50px,100px));    /*限制最大值和最小值*/
        grid-template-rows: repeat(2,minmax(50px,100px));
       /* row-gap: 10px;
        column-gap: 10px;*/
        gap: 10px 20px; /*行间距 列间距*/
        border: 1px solid aqua;
    }
    .item{
        border: 1px solid darkgray;
        background: tomato;
        box-sizing: border-box;
    }
</style>
<body>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
</div>
</body>
</html>